<template>
    <div class="header">
        <!-- 模块名称：头部 -->
        <div class="header-menu header-user-menu">
            <div class="w1190 clearfix">
                <div class="pull-left link" @click="linkToIndex">
                    <!-- 图片的路径 -->
                    <img :src="logoUrl" alt="">
                </div>
                <div class="w540 pull-left text-center menu ml40">
                    <Row>
                        <i-col span="4">
                            <a href="javascript:void(0)" @click="linkToIndex">返回首页</a>
                        </i-col>
                        <i-col span="6">
                            <a href="javascript:void(0)" @click="linkToPage('Person')" :class="{ red : isUsrIndex }">个人中心</a>
                        </i-col>
                        <i-col span="4">
                            <a href="javascript:void(0)" @click="linkToPage('contract')" :class="{ red : isContract }">合同管理</a>
                        </i-col>
                        <i-col span="6">
                            <a href="javascript:void(0)" @click="linkToPage('partner')" :class="{ red : isPartner }">通讯录</a>
                        </i-col>
                        <i-col span="4">
                            <Badge :count="count" class-name="pos">
                                 <a href="javascript:void(0)" @click="linkToPage('isNotice')" :class="{ red : isNotice }">消息通知</a>
                            </Badge>
                        </i-col>
                    </Row>
                </div>
                <div class="pull-right user-set text-center">
                  <!-- 是否认证状态 -->
                    <template v-if="type === ''">
                      <span class="name-check">未认证</span>
                    </template>
                     <template v-else-if="type === '0'">
                      <span class="name-check">个人用户</span>
                    </template>
                     <template v-else-if="type === '1'">
                      <span class="name-check">企业用户</span>
                    </template>

                    <Poptip trigger="hover" placement="bottom">
                        <a href="javascript:void(0)" :class="{ red : isAccount }"><Icon type="gear-a" class="set-size"></Icon>账号设置</a>
                        <div class="api" slot="content">
                            <a href="javascript:void(0)" @click="linkToPage('AccountNumber')">账号设置</a>
                            <a href="javascript:void(0)" @click='signout'>退出登录</a>
                        </div>
                    </Poptip>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations } from "vuex";
import { fail } from "assert";
export default {
  data() {
    return {
      logoUrl: 'img/logo.png',
      isUsrIndex: true,
      isContract: false,
      isPartner: false,
      isNotice: false,
      isAccount: false,
      count: 1,
      type:'',
      // username: ''
    };
  },
  // computed: {
  //   certification () {
  //     return this.$store.state.index.certification
  //   }
  // },
  created () {
    this.selectlist();
  },
  mounted() {
    let ths = this;
    let name = ths.$route.name;
    switch (name) {
      case "user":
        ths.isUsrIndex = true;
        ths.isContract = false;
        ths.isPartner = false;
        ths.isNotice = false;
        ths.isAccount = false;
        break;
      case "contract":
      case "contractDetails":
      case "mytemplate":
        ths.isUsrIndex = false;
        ths.isContract = true;
        ths.isPartner = false;
        ths.isNotice = false;
        ths.isAccount = false;
        break;
      case "partner":
        ths.isUsrIndex = false;
        ths.isContract = false;
        ths.isPartner = true;
        ths.isNotice = false;
        ths.isAccount = false;
        break;
      case "AccountNumber":
        ths.isUsrIndex = false;
        ths.isContract = false;
        ths.isPartner = false;
        ths.isNotice = false;
        ths.isAccount = true;
        break;
      case "sysmessage":
        ths.isUsrIndex = false;
        ths.isContract = false;
        ths.isPartner = false;
        ths.isNotice = true;
        ths.isAccount = false;
        break;
      default:
        break;
    }
  },
  methods: {
    selectlist () {
      const ths = this;
      ths.post("/user/selectAccountManagement").then(data => {
        if (data.responseCode === "100000") {
          ths.type = data.result.type;
        }
      });
    },
    ...mapMutations(["changeLogin"]),
    linkToIndex() {
      // this.$emit('linkToIndex', true)
      this.$router.push({ name: "index" });
    },
    linkToPage(name) {
      let ths = this;
      if (name !== "Person" && ths.$store.state.index.certification === "2") {
        ths.$Message.destroy();
        ths.$Message.warning("请先认证！");
        return;
      }
      switch (name) {
        case "Person":
          ths.$router.push({ name: "Person" });
          break;
        case "contract":
          ths.$router.push({ name: "contract" });
          break;
        case "partner":
          ths.$router.push({ name: "partner" });
          break;
        case "AccountNumber":
          ths.$router.push({ name: "AccountNumber" });
          break;
        case "isNotice":
          ths.$router.push({ name: "sysmessage" });
          break;
        default:
          break;
      }
    },
    signout() {
      const ths = this;
      ths.post("/user/accountExit").then(data => {
        if (data.responseCode === "100000") {
          ths.$cookie.delete("id");
          // ths.$cookie.delete("userName");
          ths.changeLogin(false);
          // ths.$store.state.index.loginsucess = false;
          ths.$router.push({ name: "index" });
        }
      });
    },
    isswitch(data) {
      let ths = this;
      switch (data) {
        case "Person":
        case "starSign":
        case "signContract":
        case "contractShow":
        case "signSuccess":
        case "uploadFile":
        case "personsign":
        case "uploadperson":
        case "uploadcompany":
          ths.isUsrIndex = true;
          ths.isContract = false;
          ths.isPartner = false;
          ths.isNotice = false;
          ths.isAccount = false;
          break;
        case "contract":
        case "contractDetails":
        case "mytemplate":
          ths.isUsrIndex = false;
          ths.isContract = true;
          ths.isPartner = false;
          ths.isNotice = false;
          ths.isAccount = false;
          break;
        case "AccountNumber":
        case "addressset":
        case "Realname":
        case "realnameSuccess":
          ths.isUsrIndex = false;
          ths.isContract = false;
          ths.isPartner = false;
          ths.isNotice = false;
          ths.isAccount = true;
          break;
        case "partner":
          ths.isUsrIndex = false;
          ths.isContract = false;
          ths.isPartner = true;
          ths.isNotice = false;
          ths.isAccount = false;
          break;
        case "sysmessage":
          ths.isUsrIndex = false;
          ths.isContract = false;
          ths.isPartner = false;
          ths.isNotice = true;
          ths.isAccount = false;
          break;
        default:
          break;
      }
    }
  },
  watch: {
    $route(to, from) {
      let ths = this;
      ths.isswitch(to.name);
    }
  }
};
</script>

<style lang="scss">
.pos {
  top: -15px;
  right: -2px;
}
.w540 {
  width: 540px;
}
.ml40 {
  margin-left: 40px;
}
.user-set {
  font-size: 20px;
  font-size: 2rem;
  .name-check{
      display: inline-block;
      padding:4px 22px;
      border:1px solid #cccccc;
      margin-right:22px;
      border-radius: 4px;
      font-size:1.4rem;
  }
  a {
    display: block;
    color: #3a3a3a;
    padding: 25px 0;
  }
  .ivu-poptip-body {
    padding: 8px 0;
  }
  .ivu-poptip-body a {
    padding: 10px 0;
    font-size: 14px;
    font-size: 1.4rem;
    &:hover {
      background: #ebebeb;
    }
  }
  .set-size {
    font-size: 2.6rem;
    margin-right: 8px;
    float: left;
  }
  .ivu-poptip-popper {
    top: 70px !important;
  }
}
</style>

